<template>
  <div class="card-cell-group">
    <div class="top-border" />
    <slot></slot>
    <div class="left-border" />
  </div>
</template>

<script setup name="CardDivider"></script>

<style lang="less" scoped>
  .card-cell-group {
    position: relative;
    width: calc(50% - 8rpx);
    .left-border {
      display: none;
    }
    .top-border {
      display: none;
    }

    &:nth-child(n + 3) {
      .top-border {
        margin: 16rpx 0;
        width: 100%;
        display: block;
        height: 1px;
        background-color: #e8e8e8;
      }
    }
    &:nth-child(2n) {
      padding-left: 16rpx;
      .left-border {
        display: block;
        position: absolute;
        left: 0;
        top: -16rpx;
        bottom: -16rpx;
        width: 1px;
        background-color: #e8e8e8;
      }
      .top-border {
        margin-left: -16rpx;
        width: 336rpx;
      }
    }
  }
</style>
